<template>
	<view>
		<view class="top">
			<view class="dir-left-nowrap box">
				<!-- <input type="text" class="box-grow-1 input" confirm-type="搜索钻石" placeholder="搜索钻石" disabled
					@click="isshowe = true"> -->
				<view class="title">
					{{totaldias}}颗钻石供您挑选
				</view>
				<view class="screen" @click="isshowe = true">
					筛选
				</view>
			</view>
			<view class="caratop">
				<view class="caratop-item" v-for="(item,index) in caratist" :key="index" @click="choicect(item,index)"
					:class="item.ischanged ? 'active' : ''">
					{{item.name}}
				</view>
			</view>
			<view class="sortop">
				<view class="sortop-item" @click="sizesort(1)">
					<view class="">
						钻重
					</view>
					<view class="image">
						<image class="image" v-if="sort == 1 && sort_type_z == 0"
							src="/static/image/icon/price-sort-to-high.png" mode=""></image>
						<image class="image" v-else-if="sort == 1 && sort_type_z == 1"
							src="/static/image/icon/price-sort-to-low.png" mode=""></image>
						<image class="image" v-else src="/static/image/icon/price-sort-default.png" mode=""></image>
					</view>
				</view>
				<view class="sortop-item" @click="sizesort(2)">
					<view class="">
						价格
					</view>
					<view class="image">
						<image class="image" v-if="sort == 2 && sort_type_g == 0"
							src="/static/image/icon/price-sort-to-high.png" mode=""></image>
						<image class="image" v-else-if="sort == 2 && sort_type_g == 1"
							src="/static/image/icon/price-sort-to-low.png" mode=""></image>
						<image class="image" v-else src="/static/image/icon/price-sort-default.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :customStyle="customStyle" v-model="isshowe" mode="top" border-radius="14" @close="isshowe = false"
			v-if="isshowe">
			<view class="" style="height: 100%;background-color: #FFFFFF;">
				<view class="closeoe" @click="closeAll">
					<view class="close-title">
						关闭
					</view>
				</view>
				<scroll-view scroll-y class="searchs">
					<view class="dir-left-nowrap search3">
						<view class="dir-left-wrap shapes">
							<view class="shape-item dir-top-wrap cross-center" v-for="(item,index) in shape"
								:key="index" :class="shapejid == index ? 'active' : ''" @click="pickerShape(index)">
								<view class="shape-img">
									<image class="shape-image"
										:src="imgprefix + '/web/uploads/diamonds/' + (index+1) + '.jpg?timeout='+timeout">
									</image>
								</view>
								<view class="shape-name">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="search2">
						<view class="title title-width">钻石大小</view>
						<picker mode="multiSelector" :range="weilist" :value="weivalue" @change="changewei"
							@columnchange="columnwei">
							<view class="search2-ch dir-left-wrap cross-center">
								<view class="search-input">
									<view class="">
										{{fistname != '' ? fistname : '选择克拉'}}
									</view>
									<view class="se-wai">
										<image class="se-image" src="/static/image/icon/bottom.png" mode=""></image>
										<view class="">
											ct
										</view>
									</view>
								</view>
								<view class="">
									—
								</view>
								<view class="search-input">
									<view class="">
										{{secdname != '' ? secdname : '选择克拉'}}
									</view>
									<view class="se-wai">
										<image class="se-image" src="/static/image/icon/bottom.png" mode=""></image>
										<view class="">
											ct
										</view>
									</view>
								</view>
							</view>
						</picker>
					</view>
					<view class="search2">
						<view class="title title-width">净度</view>
						<view class="search2-ch dir-left-wrap cross-center">
							<view class="search-item" v-for="(item,index) in clearityName" :key="index"
								@click="pickerClearity(item,index)" :class="item.ischanged ? 'active' : ''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="search2">
						<view class="title title-width">切工</view>
						<view class="search2-ch dir-left-wrap cross-center">
							<view class="search-item" v-for="(item,index) in cutName" :key="index"
								@click="pickerCut(item,index)" :class="item.ischanged ? 'active' : ''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="search2">
						<view class="title title-width">颜色</view>
						<view class="search2-ch dir-left-wrap cross-center">
							<view class="search-item" v-for="(item,index) in colorName" :key="index"
								@click="pickerColor(item,index)" :class="item.ischanged ? 'active' : ''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="search2">
						<view class="title title-width">抛光</view>
						<view class="search2-ch dir-left-wrap cross-center">
							<view class="search-item" v-for="(item,index) in polishName" :key="index"
								@click="pickerPolish(item,index)" :class="item.ischanged ? 'active' : ''">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="dir-left-nowrap main-around search-box">
					<view class="one-item" @click="clearAll">
						清空
					</view>
					<view class="one-item" @click="search">
						搜索
					</view>
				</view>
			</view>
		</u-popup>
		<view style="height: 210rpx"></view>
		<!-- 查询钻石 -->
		<view class="goods-margin">
			<image class="zsjt" :src="imgprefix + '/web/uploads/logo/ring2.png?timeout='+timeout" mode="widthFix">
			</image>
		</view>
		<!-- 说明 -->
		<view class="goods-margin">
			<image class="zsjt" :src="imgprefix + '/web/uploads/logo/ringpin.png?timeout='+timeout" mode="widthFix">
			</image>
		</view>

		<view class="list-two">
			<view class="list-two-item" v-for="(item,index) in list" :key="index" @click="todetail(item.tid)">
				<image class="image"
					:src="imgprefix + '/web/uploads/diamonds/' + item.shapeId + '.png?timeout='+timeout" mode="">
				</image>
				<view class="bridetail">
					<view class="list-two-title u-line-5">编码：{{item.barCode}}</view>
					<view class="dir-left-wrap main-between">
						<text>颜色：{{item.colorName}}</text>
						<text>重量：{{item.priStoneWeight}}ct</text>
						<text>形状：{{item.shapeName}}</text>
						<text>净度：{{item.clearityName}}</text>
						<text>切工：{{item.cutName}}</text>
						<text>抛光：{{item.polishName}}</text>
						<text>对称：{{item.symmetryName}}</text>
					</view>
					<view class="dir-left-wrap main-between">
						<view class="">
							价格：￥{{item.salePrice}}
						</view>
						<view class="">
							市场价：￥{{item.marketPrice}}
						</view>
					</view>
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				<!-- <view class="" v-if="loading">
					加载中
				</view> -->
				暂无内容
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	let isSearch = false
	let barcode1, clearityid1, fistname1, secdname1 = ''
	let shapejid1,
		colorid1,
		cutid1,
		polishid1 = -1
	let shapeid1 = '003'
	import uPopup from '../../components/basic-component/u-popup/u-popup.vue';
	export default {
		components: {
			uPopup
		},
		data() {
			return {
				totaldias: 0,

				caratist: [{
						id: 1,
						name: '30分',
						para: '0.3,0.39',
						ischanged: false
					},
					{
						id: 2,
						name: '50分',
						para: '0.5,0.59',
						ischanged: false
					},
					{
						id: 3,
						name: '70分',
						para: '0.7,0.79',
						ischanged: false
					},
					{
						id: 4,
						name: '1克拉',
						para: '1.0,1.09',
						ischanged: false
					},
					{
						id: 5,
						name: '1克拉以上',
						para: '1.1,20.0',
						ischanged: false
					},
				],
				sort: 2,
				sort_type_z: -1,
				sort_type_g: 1,

				keyword: '',
				list: [],
				listpara: [],
				page: 1,
				page_count: 1,
				imgprefix: this.$siteInfo.imgroot,
				timeout: new Date().getTime(),
				isshowe: false,
				customStyle: {
					// "top": "30rpx"
					'background-color': 'rgba(0, 0, 0, 0.2)',
					'backdrop-filter': 'blur(0rpx)'
				},
				barcode: '',
				shape: ['圆形', '公主方', '椭圆形', '梨形', '祖母绿', '心形', '橄榄形', '雷地恩', '垫形'], //形状  /*雷蒂恩形*/
				shapeid: '003',
				shapejid: 0,
				clearityName: [ // 净度
					{
						id: 0,
						name: "FL",
						ischanged: false
					},
					{
						id: 1,
						name: "IF",
						ischanged: false
					},
					{
						id: 2,
						name: "VVS1",
						ischanged: false
					},
					{
						id: 3,
						name: "VVS2",
						ischanged: false
					},
					{
						id: 4,
						name: "VS1",
						ischanged: false
					},
					{
						id: 5,
						name: "VS2",
						ischanged: false
					},
					{
						id: 6,
						name: "SI1",
						ischanged: false
					},
					{
						id: 7,
						name: "SI2",
						ischanged: false
					}
				], //净度
				clearitys: [],
				clearityid: '',
				// colorName: ["D", "E", "F", "G", "H", "I", "J", "K"], //颜色
				colorName: [ //颜色
					{
						id: 0,
						name: "D",
						ischanged: false
					},
					{
						id: 1,
						name: "E",
						ischanged: false
					},
					{
						id: 2,
						name: "F",
						ischanged: false
					},
					{
						id: 3,
						name: "G",
						ischanged: false
					},
					{
						id: 4,
						name: "H",
						ischanged: false
					},
					{
						id: 5,
						name: "I",
						ischanged: false
					},
					{
						id: 6,
						name: "J",
						ischanged: false
					},
					{
						id: 7,
						name: "K",
						ischanged: false
					}
				],
				colorid: -1,
				// cutName: ["EX", "VG", "GD"], //切工
				cutName: [ //切工
					{
						id: 0,
						name: "EX",
						ischanged: false
					},
					{
						id: 1,
						name: "VG",
						ischanged: false
					},
					{
						id: 2,
						name: "GD",
						ischanged: false
					}
				],
				cutid: -1,
				// polishName: ["EX", "VG", "GD"], //抛光
				polishName: [ //抛光
					{
						id: 0,
						name: "EX",
						ischanged: false
					},
					{
						id: 1,
						name: "VG",
						ischanged: false
					},
					{
						id: 2,
						name: "GD",
						ischanged: false
					}
				],
				polishid: -1,
				priStoneWeight: '', // 重量
				weilist: [],
				weivalue: [0, 0],
				fist: 0,
				secd: 0,
				fistname: '',
				secdname: '',
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
		},
		mounted() {
			this.loadpara()
			this.loadWeight()
		},
		onLoad() {
			this.loadlist()
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				if (isSearch) {
					this.searchlist()
				} else {
					this.loadlist()
				}
			}
		},
		methods: {
			// 钻重，价格
			sizesort(index) {
				if (index == 1) {
					this.sort = index
					this.sort_type_z = this.sort_type_z == 0 ? 1 : 0

					if (isSearch) {
						this.isshowe = false
						this.list = []
						this.page = 1
						this.page_count = 1
						this.searchlist()
					} else {
						this.isshowe = false
						this.list = []
						this.page = 1
						this.page_count = 1
						this.loadlist()
					}
				} else if (index == 2) {
					this.sort = index
					this.sort_type_g = this.sort_type_g == 0 ? 1 : 0

					if (isSearch) {
						this.isshowe = false
						this.list = []
						this.page = 1
						this.page_count = 1
						this.searchlist()
					} else {
						this.isshowe = false
						this.list = []
						this.page = 1
						this.page_count = 1
						this.loadlist()
					}
				}
			},
			// 外部选择克拉数搜索钻石
			choicect(item, index) {
				// this.caratist.map(item => {
				// 	return item.ischanged = false
				// })
				item.ischanged = !item.ischanged
				let ischoiced = this.caratist.some(item => {
					return item.ischanged
				})
				if (ischoiced) {
					this.caratist.map(items => {
						if (items.id != item.id) {
							return items.ischanged = false
						}
					})
					isSearch = true
					this.fistname = item.para.split(',')[0]
					this.secdname = item.para.split(',')[1]
					this.isshowe = false
					this.list = []
					this.page = 1
					this.page_count = 1
					this.searchlist()
				} else {
					isSearch = false
					this.fistname = ''
					this.secdname = ''
					this.isshowe = false
					this.list = []
					this.page = 1
					this.page_count = 1
					this.loadlist()
				}
			},
			// 重量数据
			loadWeight() {
				for (let i = 0.3; i < 20.1; i = i + 0.1) {
					this.weilist.push(i.toFixed(1))
				}
				this.weilist = [
					this.weilist,
					this.weilist
				]
			},
			changewei(e) {
				// console.log(e);
				this.weivalue = e.detail.value
				this.fistname = this.weilist[0][e.detail.value[0]]
				this.secdname = this.weilist[1][e.detail.value[1]]
			},
			columnwei(e) {
				// console.log(e, 'we');
				if (e.detail.column == 0) {
					this.fist = e.detail.value
					if (this.fist >= this.secd) {
						if (this.fist == 197) {
							this.secd = 197
							this.weivalue = [this.fist, this.secd]
						} else {
							this.secd = Number(this.fist + 1)
							this.weivalue = [this.fist, this.secd]
						}
					}
				} else if (e.detail.column == 1) {
					this.secd = e.detail.value
					if (this.fist >= this.secd) {
						if (this.secd == 0) {
							this.fist = 0
							this.weivalue = [this.fist, this.secd]
						} else {
							this.fist = Number(this.secd - 1)
							this.weivalue = [this.fist, this.secd]
						}
					}
				}
			},
			// 形状
			pickerShape(index) {
				// this.shapeid = index
				switch (index) {
					case 0:
						this.shapeid = '003'
						this.shapejid = 0
						break;
					case 1:
						this.shapeid = '001'
						this.shapejid = 1
						break;
					case 2:
						this.shapeid = '002'
						this.shapejid = 2
						break;
					case 3:
						this.shapeid = '004'
						this.shapejid = 3
						break;
					case 4:
						this.shapeid = '005'
						this.shapejid = 4
						break;
					case 5:
						this.shapeid = '006'
						this.shapejid = 5
						break;
					case 6:
						this.shapeid = '007'
						this.shapejid = 6
						break;
					case 7:
						this.shapeid = '008'
						this.shapejid = 7
						break;
					case 8:
						this.shapeid = '009'
						this.shapejid = 8
						break;
				}
			},
			// 净度
			pickerClearity(item, index) {
				item.ischanged = !item.ischanged
				this.clearityid = 1
				/* let changed = this.clearityName.filter(item => {
					return item.ischanged
				})
				changed.filter(item => {
					this.clearityid.push(item.name)
				}) */
				// console.log(item, index);
				// console.log(e);
				// this.clearityid = index
				// this.clearityid = e.detail.value
			},
			// 切工
			pickerCut(item, index) {
				item.ischanged = !item.ischanged
				this.cutid = 1
			},
			// 颜色
			pickerColor(item, index) {
				item.ischanged = !item.ischanged
				this.colorid = 1
			},
			// 抛光
			pickerPolish(item, index) {
				item.ischanged = !item.ischanged
				this.polishid = 1
			},
			inputw(e) {
				this.priStoneWeight = e.detail.value
			},
			input(e) {
				this.barcode = e.detail.value
			},
			closeAll() {
				this.isshowe = false
				if (isSearch) {
					this.barcode = barcode1
					this.shapeid = shapeid1
					this.shapejid = shapejid1
					this.fistname = fistname1
					this.secdname = secdname1
					this.clearitys = clearityid1
					// this.colorid = colorid1
					// this.cutid = cutid1
					// this.polishid = polishid1
					this.clearityName.map((item, index) => {
						if (this.clearitys.includes(item.id)) {
							return item.ischanged = true
						} else {
							return item.ischanged = false
						}
					})
					this.cutName.map((item, index) => {
						if (cutid1.includes(item.id)) {
							return item.ischanged = true
						} else {
							return item.ischanged = false
						}
					})
					this.colorName.map((item, index) => {
						if (colorid1.includes(item.id)) {
							return item.ischanged = true
						} else {
							return item.ischanged = false
						}
					})
					this.polishName.map((item, index) => {
						if (polishid1.includes(item.id)) {
							return item.ischanged = true
						} else {
							return item.ischanged = false
						}
					})
				} else {
					this.barcode = ''
					this.shapeid = '003'
					this.shapejid = 0
					this.weivalue = [0, 0]
					this.fist = 0
					this.secd = 0
					this.fistname = ''
					this.secdname = ''
					this.clearityid = ''
					this.clearityName.map(item => {
						return item.ischanged = false
					})
					this.colorName.map(item => {
						return item.ischanged = false
					})
					this.cutName.map(item => {
						return item.ischanged = false
					})
					this.polishName.map(item => {
						return item.ischanged = false
					})
					this.colorid = -1
					this.cutid = -1
					this.polishid = -1
					/* this.list = []
					this.page = 1
					this.page_count = 1
					this.loadlist() */
				}
			},
			todetail(id) {
				uni.navigateTo({
					url: '/plugins/diamonds/baredritail?id=' + id
				})
			},
			loadlist() {
				let params = {
					page: this.page,
					limit: 10,
					params: {
						orderby: {}
					}
				}
				if (this.sort == 1) {
					params.params.orderby.priStoneWeight = this.sort_type_z
				} else if (this.sort == 2) {
					params.params.orderby.discountPrice = this.sort_type_g
				}
				this.$request({
					url: this.$api.goods.zslist,
					data: params
				}).then(res => {
					this.totaldias = res.data.pagination.total_count
					this.page_count = res.data.pagination.page_count
					this.list = this.list.concat(res.data.list)
					/* this.list.forEach((item) => {
						switch (item.shapeId) {
							case '001':
								item.shapeName = '公主方'
								break;
							case '002':
								item.shapeName = '椭圆形'
								break;
							case '003':
								item.shapeName = '圆形'
								break;
							case '004':
								item.shapeName = '梨形'
								break;
							case '006':
								item.shapeName = '心心相印/心形'
								break;
							case '008':
								item.shapeName = '三角形'
								break;
							case '010,005,017':
								item.shapeName = '祖母绿'
								break;
							case '011,016,009,018':
								item.shapeName = '雷地恩'
								break;
							case '012':
								item.shapeName = '橄榄形'
								break;
							case '013,015':
								item.shapeName = 'Fire Cushion/垫形'
								break;
						}
					}) */
					// console.log(res);
				});
			},
			loadpara() {
				this.$request({
					url: this.$api.goods.zspara
				}).then(res => {
					this.listpara = res.data
				});
			},
			clearAll() {
				this.barcode = ''

				this.weivalue = [0, 0]
				this.fist = 0
				this.secd = 0
				this.fistname = ''
				this.secdname = ''

				this.clearityName.map(item => {
					return item.ischanged = false
				})
				this.colorName.map(item => {
					return item.ischanged = false
				})
				this.cutName.map(item => {
					return item.ischanged = false
				})
				this.polishName.map(item => {
					return item.ischanged = false
				})
				// 外部重量搜索
				this.caratist.map(item => {
					return item.ischanged = false
				})

				this.shapeid = '003'
				this.shapejid = 0
				this.clearityid = ''
				this.cutid = -1
				this.colorid = -1
				this.polishid = -1
				this.isshowe = false
				isSearch = false
				this.list = []
				this.page = 1
				this.page_count = 1
				this.loadlist()
			},
			search() {
				this.sort = 2
				this.sort_type_g = 1
				if (this.barcode == '' && this.shapeid == -1 && this.clearityid == '' && this.cutid == -1 &&
					this.colorid == -1 && this.polishid == -1 && this.fistname == '') {
					this.isshowe = false
					this.list = []
					this.page = 1
					this.page_count = 1
					this.loadlist()
					// return
				} else {
					isSearch = true

					barcode1 = this.barcode

					shapeid1 = this.shapeid
					shapejid1 = this.shapejid
					// clearityid1 = this.clearityid
					// cutid1 = this.cutid
					// colorid1 = this.colorid
					// polishid1 = this.polishid

					this.isshowe = false
					this.list = []
					this.page = 1
					this.page_count = 1
					// 外部重量搜索
					this.caratist.map(item => {
						return item.ischanged = false
					})
					this.searchlist()
				}
			},
			searchlist() {
				let params = {
					shapeId: this.shapeid,
					orderby: {}
				}
				if (this.sort == 1) {
					params.orderby.priStoneWeight = this.sort_type_z
				} else if (this.sort == 2) {
					params.orderby.discountPrice = this.sort_type_g
				}
				// 编码
				if (this.barcode != '') {
					params.barcode = this.barcode
				}
				// 重量
				if (this.fistname != '' && this.secdname != '') {
					fistname1 = this.fistname
					secdname1 = this.secdname
					params.priStoneWeight = Number(this.fistname).toFixed(4) + ',' + Number(this.secdname).toFixed(4)
				}
				// 形状

				// 净度
				clearityid1 = []
				if (this.clearityid != '') {
					clearityid1 = this.clearitys = []
					params.clearityName = []
					// this.clearitys = this.clearityName
					let changed = this.clearityName.filter(item => {
						return item.ischanged
					})
					changed.filter(item => {
						this.clearitys.push(item.id)
					})
					clearityid1 = this.clearitys
					changed.filter(item => {
						params.clearityName.push(item.name)
					})
					// params.clearityName = this.clearityName[this.clearityid]
				}
				// 切工
				cutid1 = []
				if (this.cutid != -1) {
					params.cutName = []
					cutid1 = []
					let changed = this.cutName.filter(item => {
						return item.ischanged
					})
					changed.filter(item => {
						cutid1.push(item.id)
					})
					changed.filter(item => {
						params.cutName.push(item.name)
					})
					// params.cutName = this.cutName[this.cutid]
				}
				// 颜色
				colorid1 = []
				if (this.colorid != -1) {
					params.colorName = []
					colorid1 = []
					let changed = this.colorName.filter(item => {
						return item.ischanged
					})
					changed.filter(item => {
						colorid1.push(item.id)
					})
					changed.filter(item => {
						params.colorName.push(item.name)
					})
					// params.colorName = this.colorName[this.colorid]
				}
				// 抛光
				polishid1 = []
				if (this.polishid != -1) {
					params.polishName = []
					polishid1 = []
					let changed = this.polishName.filter(item => {
						return item.ischanged
					})
					changed.filter(item => {
						polishid1.push(item.id)
					})
					changed.filter(item => {
						params.polishName.push(item.name)
					})
					// params.polishName = this.polishName[this.polishid]
				}
				this.$request({
					url: this.$api.goods.zslist,
					data: {
						page: this.page,
						limit: 10,
						params: params
					}
				}).then(res => {
					this.totaldias = res.data.pagination.total_count
					this.page_count = res.data.pagination.page_count
					this.list = this.list.concat(res.data.list)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchs {
		height: 82vh;
	}

	.closeoe {
		width: 100%;
		height: 100rpx;
		padding: 24rpx;
		text-align: right;

		.close-img {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.search2-ch {
		flex: 1;
		font-size: 24rpx;
		color: #333;
	}

	.search-item {
		display: flex;
		border: 1rpx solid #CCCDDD;
		flex: 1;
		// text-align: center;
		align-items: center;
		justify-content: center;
		// padding: 6rpx 8rpx;
		height: 64rpx;
		margin: 4rpx 12rpx;
		border-radius: 36rpx;

		&.active {
			border: 1rpx solid #8b542f;
			background-color: #8b542f;
			color: #FFFFFF;
		}
	}

	.search-input {
		display: flex;
		border: 1rpx solid #CCCDDD;
		flex: 1;
		// text-align: center;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx;
		height: 64rpx;
		margin: 4rpx 32rpx;
		border-radius: 36rpx;

		&.active {
			border: 1rpx solid #8b542f;
			background-color: #8b542f;
			color: #FFFFFF;
		}

		.se-image {
			width: 24rpx;
			height: 12rpx;
			margin-right: 12rpx;
		}

		.se-wai {
			display: flex;
			align-items: center;
		}
	}

	.search1 {
		position: relative;
		font-size: 28rpx;
		width: 100%;
		padding: 20rpx 84rpx 20rpx 30rpx;
		background-color: #F7F7F7;
		display: flex;
		align-items: center;

		.close-tip {
			position: absolute;
			right: 0;
			width: #{64rpx};
			height: #{64rpx};
			margin-right: #{20rpx};
			z-index: 30;
		}

		.search-close {
			width: #{32rpx};
			height: #{32rpx};
			border-radius: 50%;
			margin: #{16rpx};
		}
	}

	.search2 {
		// margin: 24rpx;
		margin: 12rpx 0;
		padding: 1upx 30upx;
		// display: flex;
		// align-items: center;
		// height: 100upx;
		// line-height: 100rpx;
		// justify-content: space-between;
		background-color: #ffffff;

		.searchpic {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.title {
			font-size: 28rpx;
			color: #333;
			margin-right: 24rpx;
			margin-left: 12rpx;
			line-height: 64rpx;
		}
	}

	.search3 {
		// margin: 24rpx;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		// height: 100upx;
		line-height: 100rpx;
		justify-content: space-between;
		background-color: #ffffff;

		.searchpic {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.title {
			font-size: 28rpx;
			color: #333;
			margin-right: 24rpx;
		}
	}

	.shapes {
		flex: 1;
		height: 122rpx;
		overflow: hidden;

		.shape-item {
			padding: 12rpx 24rpx;
			margin-bottom: 12rpx;
			border: 1rpx solid #FFFFFF;

			&.active {
				border: 1rpx solid #8b542f;
				// background: #8b542f;
				// color: #FFFFFF;
			}
		}

		.shape-img {
			width: 52rpx;
			height: 64rpx;

			.shape-image {
				width: 52rpx;
				height: 64rpx;
			}
		}

		.shape-name {
			font-size: 24rpx;
			line-height: 30rpx;
		}
	}

	.top {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 15;
		padding: #{20rpx} #{16rpx};
		background-color: #F7F7F7;
		font-size: $uni-font-size-import-two;
		color: $uni-general-color-one;

		.input {
			width: 100%;
			background-color: #ffffff;
			border-radius: 15rpx;
			padding: 0 #{32rpx};
			font-size: $uni-font-size-general-one;
			height: #{64rpx};
			text-align: #c0c0c0;
			box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.1);
		}

		.box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			font-size: 28rpx;

			.title {
				font-size: 32rpx;
			}

			.screen {
				font-size: 32rpx;
				color: #8b542f;
				background-color: rgba($color: #ffffff, $alpha: 0.9);
				padding: 12rpx 36rpx;
				border-radius: 36rpx;
			}

			.close-tip {
				position: absolute;
				right: 0;
				width: #{64rpx};
				height: #{64rpx};
				margin-right: #{20rpx};
				z-index: 30;
			}

			.search-close {
				width: #{32rpx};
				height: #{32rpx};
				border-radius: 50%;
				margin: #{16rpx};
			}
		}

		.radio {
			margin-top: #{32rpx};

			.radio-item {
				padding-bottom: #{12rpx};
			}

			.active {
				border-bottom: #{4rpx} solid;
			}
		}
	}

	.caratop {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 24rpx;
		font-size: 24rpx;

		.caratop-item {
			padding: 6rpx 24rpx;
			border-radius: 36rpx;
			background-color: rgba($color: #FFF, $alpha: 0.9);

			&.active {
				// color: #8b542f;
				background-color: #8b542f;
				color: #FFFFFF;
			}
		}
	}

	.sortop {
		// position: fixed;
		display: flex;
		margin-top: 24rpx;
		font-size: 24rpx;
		align-items: center;
		justify-content: space-around;

		.sortop-item {
			display: flex;
		}

		.image {
			align-items: center;
			margin-left: 12rpx;
			width: 16rpx;
			height: 26rpx;
		}
	}

	.goods-margin {
		width: 100%;
		margin: 20rpx auto 0;
		text-align: center;
	}

	.zsjt {
		width: 720rpx;
		margin: 0 auto;
		text-align: center;
	}

	.list-two {
		margin: 20rpx 0;
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			// height: 240rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;

			.bridetail {
				color: #8b542f;
				padding: 24rpx 32rpx;
				background: #FFF;
				font-size: 26rpx;
				width: 460rpx;
			}

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				// flex: 1;
				// margin-left: 36rpx;
				text-align: justify;
			}
		}
	}

	.search-box {
		margin: 0 auto;
		padding: 24rpx 0;
	}

	.one-item {
		border: 1rpx solid #8b542f;
		background-color: #FFF;
		color: #8b542f;
		padding: 12rpx 64rpx;
	}

	.close-title {
		width: fit-content;
		border: 1rpx solid #8b542f;
		background-color: #FFF;
		color: #8b542f;
		padding: 12rpx 64rpx;
		float: right;
	}

	.nopt {
		text-align: center;
		line-height: 234rpx;
		font-size: 30rpx;
	}
</style>
